<template>
	<view class="content">
		<view class="input-wrap">
			<textarea class="textarea" @input="inputDesc" placeholder="说点什么,让缘分来的更快点" maxlength="150" />
			<view class="length-wrap">
				<text>{{desc_length}}/150</text>
			</view>
		</view>
		<view class="type-wrap">
			<view :class="['type-item', form.type == '1' ? 'active' : '']" @click="tabType('1')">
				<image v-if="form.type == '1'" src="/static/img/post_image.png" mode=""></image>
				<image v-else src="/static/img/post_image0.png" mode=""></image>
			</view>
			<view :class="['type-item', form.type == '2' ? 'active' : '']" @click="tabType('2')">
				<image v-if="form.type == '2'" src="/static/img/post_video.png" mode=""></image>
				<image v-else src="/static/img/post_video0.png" mode=""></image>
			</view>
			<!-- <view :class="['type-item', form.type == '3' ? 'active' : '']" @click="tabType('3')">
				<image v-if="form.type == '3'" src="/static/img/post_audio.png" mode=""></image>
				<image v-else src="/static/img/post_audio0.png" mode=""></image>
			</view> -->
		</view>
		<view class="uploader-wrap">
			<view class="media-item" v-for="(item, index) in mediaList" :key="index">
				<view v-if="form.type == '1'" class="image" @click="previewImage(item, index)">
					<image :src="item.file" mode="aspectFill"></image>
				</view>
				<view v-if="form.type == '2'" class="video" @click="previewVideo(item)">
					<image v-if="item.progress == 100" :src="item.file + '?vframe/jpg/offset/1'" mode="aspectFill"></image>
					<image v-else class="placeholder" src="/static/img/post_video0.png" mode="widthFix"></image>
					<image class="player-icon" src="/static/img/player_icon.png" mode="widthFix"></image>
				</view>
				<view v-if="item.progress != 100" class="progress">
					<text>{{item.progress}}%</text>
				</view>
			</view>
			<view :class="['media-item', isFull ? 'hidden' : '']">
				<view class="add" @click="upload">
					<view class="uni-icon uni-icon-plusempty"></view>
				</view>
			</view>
		</view>
		<view class="topic-wrap">
			<view class="topic_rose" v-if="!ish">
				<view class="title">个人资料中可看并收费</view>
				<view class="sliderbox">
					<bestjhh-movable-area :max="maxmi" min='0' @change='change' ></bestjhh-movable-area>
				</view>
				
			</view>
			<view class="title">选择话题</view>
			<view class="topic-list">
				<view :class="['topic-item', topicIndex == index ? 'active' : '']" v-for="(item, index) in topic" :key="item.id" @click="selectTopic(item, index)">#{{item.name}}#</view>
			</view>
		</view>
	</view>
</template>

<script>
	import qiniuUploader from '@/common/qiniu/qiniu_wx.js';
	import bestjhhMovableArea from "@/components/bestjhh-movable-area/bestjhh-movable-area.vue";
	
	export default {
		components: {
			bestjhhMovableArea
		},
		data() {
			return {
				ish:false,  //是否隐藏
				topic: [],
				topicIndex: -1,
				myInfo: {},
				form: {
					description: '',
					type: '1',
					tid: '',
					rose: 0,
					files: ''
				},
				desc_length: 0,
				mediaList: [],
				mediaList_key: [],
				max: 9,
				isFull: false,
				maxmi:0,   //最高可收费米币
				
				mgArr:[],
				isSensitive:false,
				
			}
		},
		onLoad(option) {
			this.topic = JSON.parse(option.topic);
			const hiddenInfo = uni.getStorageSync('isHidden');
			if(hiddenInfo.isHidden=="1"){
				this.ish=true;
			}
			try {
				this.mgArr = uni.getStorageSync('sensitive');
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
					console.log('myInfo用户信息',this.myInfo)
				}
			} catch (e) {
				console.log(e)
			}
			this.getMax();
		},
		onReady() {
			this.updateQiniuToken();
		},
		onNavigationBarButtonTap(e) {
			this.trendsdynamic();
		},
		methods: {
			change(e){
				this.form.rose=e;
			},
			// 发布一条动态
			trendsdynamic(){
				// 处理数值得问题
				// this.form.rose = parseInt(this.form.rose).toString();
				this.form.files = this.mediaList_key.join();
				if(this.isSensitive){
					uni.showToast({
						title: '信息内含有违规内容，请规范你的内容',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				
				if (this.form.files == '') {
					let showToast = '';
					if (this.form.type == '1') {
						showToast = '请选择至少一张图片';
					}
					if (this.form.type == '2') {
						showToast = '请选择一个视频';
					}
					uni.showToast({
						title: showToast,
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.tid == '') {
					uni.showToast({
						title: '请选择一个话题',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				uni.showLoading({
					title: '',
				});
				setTimeout(function(){
					uni.hideLoading();
				},2000)
				
				
				this.$api.api.ajaxData({
					method: 'V1.DynamicCreate',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					tid: this.form.tid,
					description: this.form.description,
					type: this.form.type,
					rose: this.form.rose == 'NaN' ? '0' : this.form.rose,
					files: this.form.files,
				}, res => {
					uni.hideLoading();
					if (res.status) {
						uni.showToast({
							title: '提交成功，请耐心等待审核',
							position: 'bottom',
							icon: 'none'
						});
						setTimeout(() => {
							uni.$emit('dynamics-page', {
								type: 'update',
							})
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			updateQiniuToken: function () {
				let timestamp = (new Date()).getTime();
				this.$api.api.ajaxData({
					method: 'V1.QiniuToken',
					uid: this.myInfo.id,
					token: this.myInfo.token,
				}, res => {
					if (res.status) {
						let expires = timestamp + res.data.expires*1000;
						this.myInfo.qiniu = {
							token: res.data.token,
							domain: res.data.domain,
							expires: expires
						}
						uni.setStorage({
							key: 'myInfo',
							data: this.myInfo,
							success: () => {
								console.log('myInfo已更新');
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				})
			},
			
			inputDesc(e) {
				this.form.description = e.target.value;
				this.desc_length = this.form.description.length;
				
				this.isSensitive = this.filtion(this.mgArr,this.form.description)
			},
			// 敏感词匹配事件
			filtion(arr, value) {
			    let re = '';
				let isming=false;
			    for (let i = 0; i < arr.length; i++) {
			        if (i==arr.length-1) {
			            re+=arr[i];
			        }else{
			            re+=arr[i]+"|";
			        }
			       
			        //利用RegExp可以动态生成正则表示式
			        let r = new RegExp(arr[i], "ig");
			        if(r.test(value)){
						
						//这里是有敏感词的情况下，已经标红，并且提示为false
						isming=true;
						return isming;
			        } 
			    }
			},
			tabType: function (type) {
				if (this.form.type == type) {
					return false;
				}
				this.form.type = type;
				this.mediaList = [];
				this.mediaList_key = [];
				this.isFull = false;
			},
			
			upload: function() {
				if (this.form.type == '1' && this.isFull) {
					uni.showToast({
						title: '最多只能上传9张图片',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.type == '2' && this.isFull) {
					uni.showToast({
						title: '最多只能上传1个视频',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				if (this.form.type == '1') {
					uni.chooseImage({
						sourceType: ['camera', 'album'],
						sizeType: ['original', 'compressed'],
						count: this.max,
						success: res => {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								this.max--;
								this.mediaList.push({
									file: res.tempFilePaths[i],
									progress: 0
								})
								this.isFull = this.mediaList.length >= 9 ? true : false;
								this.uploadFile(res.tempFilePaths[i], this.mediaList.length-1)
							}
						}
					})
				}
				if (this.form.type == '2') {
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						sizeType: ['original', 'compressed'],
						count: 1,
						success: (res) => {
							this.mediaList.push({
								file: res.tempFilePath,
								progress: 0
							})
							this.isFull = this.mediaList.length >= 1 ? true : false;
							this.uploadFile(res.tempFilePath, this.mediaList.length-1)
						}
					})
				}
			},
			
			uploadFile: function (file, index) {
				var key = 'file_' + this.$api.api.getRandom(0, 100000000) + '-t_' + (+new Date());
				
				var uploadTask = uni.uploadFile({
					url: this.QINUUPLOADURL,
					filePath: file,
					name: 'file',
					formData: {
						'token': this.myInfo.qiniu.token,
						'key': key
					},
					success: res => {
						
						if (res.statusCode == 200) {
							let dataObject = JSON.parse(res.data)
							this.mediaList_key[index] = dataObject.key
							if (this.form.type == '2') {
								let temp = this.mediaList[index]
								temp.file = this.myInfo.qiniu.domain + dataObject.key
								this.$set(this.mediaList, index, temp)
							}
						} else {
							uni.showToast({
								title: '上传失败，请稍后再试',
								position: 'bottom',
								icon: 'none'
							})
						}
					},
					fail: err => {
						console.error(err);
						uni.showToast({
							title: '上传失败，请稍后再试',
							position: 'bottom',
							icon: 'none'
						})
					},
				});
				uploadTask.onProgressUpdate(res => {
					let temp = this.mediaList[index]
					temp.progress = res.progress
					this.$set(this.mediaList, index, temp)
				});
			},
			
			previewImage: function(item, index) {
				uni.previewImage({
					current: index,
					urls: this.mediaList
				})
			},
			
			previewVideo: function(item) {
				let media = {
					file: item.file
				}
				uni.navigateTo({
					url: '../video/video?media=' + encodeURIComponent(JSON.stringify(media))
				})
			},
			
			selectTopic: function (item, index) {
				this.topicIndex = index;
				this.form.tid = item.id;
			},
			// 获取后台设置的最高收费米币
			getMax: function () {
				this.$api.api.ajaxData({
					method: 'V1.GetConfig',
					config: 'love.add.dynamic.max',
				}, res => {
					if (res.status) {
						
						this.maxmi=parseInt(res.data);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.input-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		margin-top: 2rpx;
		border: 1rpx solid #f9f9f9;
		.textarea {
			width: 100%;
		}
		.length-wrap {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			width: 100%;
			padding: 0 30rpx;
		}
	}
	.uploader-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 9rpx;
		background-color: #fff;
		.media-item {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 244rpx;
			height: 244rpx;
			box-sizing: border-box;
			position: relative;
			&.hidden {
				display: none;
			}
			.image {
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					display: block;
					width: 230rpx;
					height: 230rpx;
					border-radius: 10rpx;
				}
			}
			.video {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
				background-color: #CCCCCC;
				position: relative;
				image {
					display: block;
					width: 230rpx;
					height: 230rpx;
					border-radius: 10rpx;
				}
				.placeholder {
					width: 80rpx;
					border-radius: 0;
				}
				.player-icon {
					width: 60rpx;
					border-radius: 0;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -30rpx;
					margin-top: -30rpx;
				}
			}
			.progress {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
				position: absolute;
				left: 7rpx;
				right: 7rpx;
				top: 7rpx;
				bottom: 7rpx;
				text {
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
		.add {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 228rpx;
			height: 228rpx;
			border: 1rpx solid #ddd;
			border-radius: 10rpx;
			.uni-icon {
				font-size: 120rpx;
				color: #ddd;
			}
			.add-image {
				width: 50rpx;
			}
			.add-text {
				font-size: 18rpx;
			}
		}
	}
	.topic-wrap {
		padding: 20rpx 20rpx;
		background-color: #fff;
		.topic_rose{
			.sliderbox{
				margin: 50rpx auto 0;
				margin-left: 20rpx;
				width: 640rpx;
			}
			// >view{
			// 	width: 200rpx;
			// 	padding-left: 20rpx;
			// 	display: flex;
			// 	>input{
			// 		border: 1px solid #999;
			// 		border-radius: 20rpx;
			// 		text-align: center;
			// 		width: 150rpx;
			// 	}
			// 	>text{
			// 		width: 100rpx;
			// 	}
			// }
		}
		.title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			padding: 0 20rpx;
		}
		.topic-list {
			display: flex;
			flex-wrap: wrap;
		}
		.topic-item {
			font-size: 28rpx;
			color: #222;
			padding: 6rpx 30rpx;
			margin: 0 20rpx 20rpx 0;
			background-color: #f5f5f5;
			border-radius: 50rpx;
			&.active {
				background-color: #EE3476;
				color: #fff;
			}
		}
	}
	.type-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		.type-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			padding: 20rpx 0;
			box-shadow: 0px 0px 10px #efefef;
			&.active {
				box-shadow: none;
			}
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
